<template>
  <div class="home">
    <teleport to="#lin">aaa</teleport>
    <button @click="add">+</button>
    <h2>自定义指令</h2>
    <div v-formater="'hh-mm-cc'">12321321321</div>
    <input type="text" v-focus.bbb="123" />
    <router-link to='/home' v-slot="props" custom>
    <button>{{props.href}}</button>
      <button>{{props.isActive}}</button>
  <button></button>
    </router-link>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  ref,
  readonly,
  Ref,
  toRefs,
  toRef,
  computed,
  watch,
  watchEffect,
  onMounted,
  onUnmounted,
  onUpdated,
  getCurrentInstance
} from "vue";
import { useRoute, useRouter} from 'vue-router'

import customRef from "./useDebounceRef";

import { useConter, useTitle } from './hooks/useContet'

export default defineComponent({
  name: "AA",
  components: {},
  props: {
    data: String,
  },

  //自定义指令
  directives: {
    focus: {
      mounted(el, bindings, vnode, preVnode) {
        el.focus()

      }
    }
  },

  setup(props, context) {
    const { state, add } = useConter()
    const { titleRef } = useTitle('aaa')

    const router = useRouter()
    const route = useRoute()

      const instance = getCurrentInstance()
      console.log(instance?.appContext.config.globalProperties.$name);
      


    titleRef.value = 'ref'
    return { state, add };
  },
});
</script>

<style lang="less" scoped>
.aaa {
  font-size: 100px;
}
</style>
